body{
	/*background-image:url('http://imgstore.cdn.sogou.com/app/a/100540002/604597.jpg');*/
	background-image:url('http://pics.sc.chinaz.com/files/pic/pic9/201506/apic12765.jpg');
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
    background-size:80% 100%;/*背景图片的大小调整*/
    font-size:100%;
    margin: 0px;
    padding: 0px;
}
h1.FQH{
	color:yellow;
	text-align:center;
	background-color:#ff0000;
}
p.FQH{
    text-align: center;
    font-size:20px;
	color:skyblue;
	font-family:"黑体";
}
p.comments{
    text-align: center;
	margin-right:800px;
}
#zsst{
    text-align: center;
	text-decoration:line-through overline underline;
	letter-spacing:5px;/*文字间的空间*/
	direction:rtl;
	unicode-bidi:bidi-override;
}
div.text-indent p{
     text-align: left;/*文本对齐，文本缩进，空白处理*/
     text-indent: 40px;
     white-space: pre-wrap;
    
}
p.wyw{
	text-align:justify;/*两端对齐,两端对齐是将文字段落的左右两端的边缘都对齐。 这两种对齐方式的左边都是对齐的，而一般来说，如果段末最后一行字数太少，那么最后一行“两端对齐”的效果与“左对齐”的效果一样*/
	text-indent:em;/*文本缩进*/
	line-height:25px;/*行高，值可用百分比表示*/
	white-space:pre-wrap;/*设置元素中空白的处理方式normal	默认。空白会被浏览器忽略。pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。pre-wrap	保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。*/
	font-weight:bolder;/*设置文本粗细，属性值：bold粗体，bolder更粗，lighter更细或者从100-900，400＝默认，700=bold*/
}
p.it{
	text-transform:capitalize;/*首字母大写*/
	word-spacing:10px;/*单词间的空间*/
	text-shadow:3px 2px #ff0000;/*文本阴影*/
}
p.for{
	font-family:"Times";
	font-style:oblique;
	font-size:smaller;/*smaller,比父元素更小的字体;larger，比父元素更小的字体。xx-small x-small small larger x-larger xx-larger。固定值或百分比*/
	font-weight:900;/*字体粗细。bold粗体 bolder更粗的字体 lighter 更细的字体。数字100-900,400等同于默认，700等同于bold*/
}
p.for2{
	font-family:"Times";
	font-style:italic;
	font-size:25px;
	font-variant:small-caps;/*小型大写字母字体*/
}
h2{
	text-transform:capitalize;/*文本转化，uppercase 全部大写，lowercase 全部小写 capitalize 首字母大写*/
	font-family:"新宋体";
}
img.w3c{
	vertical-align:middle;/*baseline	默认。元素放置在父元素的基线上。sub	垂直对齐文本的下标。super	垂直对齐文本的上标top	把元素的顶端与行中最高元素的顶端对齐text-top	把元素的顶端与父元素字体的顶端对齐middle	把此元素放置在父元素的中部。bottom	把元素的顶端与行中最低的元素的顶端对齐。text-bottom	把元素的底端与父元素字体的底端对齐。length	 %	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。*/
}
ul.a{
	list-style-type:circle;
}
ol.b{
	list-style-type:lower-alpha;
}
ul.c{
	list-style-type:none;
	padding:0px;
	margin:0px;
}
ul.c li{
	background-image:url("https://img02.sogoucdn.com/net/a/04/link?url=http%3A%2F%2Fi03.pic.sogou.com%2F482922024b351c76&appid=122");
	background-repeat:no-repeat;
	background-position:-200px 1px;
	padding-left:50px;
}
table,th,td {
	color:black;
	border:5px inset #98bf21;
    border-collapse:collapse;/*合并边框，separate分离，collapse合并*/
    width:50%;
    height:10px;
    text-align:center;
    vertical-align:;
}
td{
	padding:10px 0px 5px 5px;
	text-align:center;
}
th{
	background-color:skyblue;
	color:white;
}
tr.alt{
	background-color:red;
}
caption{
	caption-side:bottom;/*设置表格标题位置*/
	padding-top: -200px;
}
p.border{
	border-top-style:dashed;/*虚线框*/
	border-bottom-style:dotted;/*点线框*/
	border-left-style:solid;/*实线框*/
	border-right-style:double;	/*双线框、groove 3D沟槽边界、ridge 3D脊边界、inset 3D嵌入边框 outset 3D突出边框*/
	border-width:5px;
	border-left-width:10px;
	border-left-color:red;
	outline:medium solid blue; /*轮廓*/
}
h2,h3{
	color:gray;/*分组选择器*/
}
p.test{
	visibility:hidden;/*可见性,hidden隐藏但仍然占据空间visible 显示 collapse和hidden一样*/
	display:none;     /*设置是否显示*/
}
p.inline{
	display:inline;/*块元素显示为内联元素*/
}
span.block{
	display:block;/*内联元素显示为块元素*/
}
tr.collapse{
	visibility:collapse;/*collapse在表格中隐藏*/
}
table{
	position:relative;
	left:300px;   /*相对定位*/
}
img.one{
	position:relative;
	top:50px;
	z-index:-1;/*指定元素的堆叠顺序*/
}
img.two{
	position:fixed;/*固定定位*/
	right:0px;
	top:200px;
}
img.three{
	position:absolute;/*绝对定位*/
	top:60px;
	left:0px;
	z-index:-2;
}
/*clip rect 四个参数
最终剪裁的矩形的上边距离原始元素的上边缘30像素； 
剪裁矩形的右边缘距离原元素左边缘的距离是200像素； 
剪裁矩形的下边缘1距离原元素顶部的距离为200像素； 
剪裁矩形的左边缘距离原元素左边缘的距离是20像素。*/
img.four{
	position:absolute;
	clip:rect(0px,190px,180px,30px);
	right: 0px;
}
p.overflow{
	width:150px;
	height:100px;
	overflow:scroll;/*规定溢出时怎么处理。auto自动、scroll滚动、hidden隐藏、visible可见*/
	position:relative;
	left:700px;
}
div.span span{
	display:block;
}
img.float{
    float:left;
    border:solid 2px red;
    margin: 10px 10px 0px 0px;
}
img.floattest{
    float: left;
    margin: 5px;
}
p.clear{
    clear: both;  /*left左侧不允许浮动元素right右侧不允许*/ 
}
div.divfloat{ /*标题和图片向右侧浮动*/
    float: right;
    text-align: center;
    border: groove 10px skyblue;
    padding: 5px;
    margin: 0px 5px 5px 5px;
    width: 120px;
}
span.wen{
    float:left;
	width:1.2em;
	font-size:400%;
	font-family:algerian,courier;
	line-height:120%;
    margin-bottom: -20px;
}
div.container{
    clear: both;
    width: 100%;
    border: solid 1px gray;
    margin:0px;
    padding: 0px;
}
div.header {
    background-color: gray;
    margin-top: -20px;
    color: white;
}
div.left{
    float: left;
    width: 100px;;
    padding: 5px;
    color: black;
}
div.right{
    border: solid 1px gray;
    margin-left: 120px;
    padding: 1em;
    margin-top:-21px ;
    margin-bottom:-21px;
}
div.foot{
    background-color: gray;
    margin-bottom:-20px;
    color: white;
}
/*horizontal align 水平对齐*/
p.center{
    width: 450px;/*中心对齐使用margin属性auto值*/
    margin: auto;/*如果宽度是100%居中是没有效果的*/
    margin-top: 10px;
    background-color: purple;
}
p.absolute{
    width: 450px;/*绝对定位与文档流无关所以它们可以覆盖页面上其他元素*/
    position: absolute;/*使用绝对定位设置左右对齐*/
    right: 0px;   
}
div.parent{/*给绝对定位嵌套一个相对定位的父元素*/
    position:relative;  
    left:0px;  
    top:0px;  
    margin:0;  
    padding:0;
}
p.align1{/*浏览器兼容问题*/
/*<p>类似这样的元素对齐时，预先确定margin和元素的填充，始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。
IE8和早期有一个问题，当使用position属性时。如果一个容器元素（在本例中<div class="container">）指定的宽度，!DOCTYPE声明是缺失，IE8和早期版本会在右边增添17px的margin。这似乎是一个滚动的预留空间。使用position属性时始终设置在DOCTYPE声明中！body{margin:0px;padding:0px;}
*/
    width: 450px;
    float: right;/*使用float设置左右对齐*/
    margin-top: 30px;
}
div.quanju{
    margin: auto;
    width: 80%;
   /* margin-left: 10%;
    margin-right: 5%;*/
}
/*fixed固定定位，这里他所固定的对像是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。*/
div.selector p{/*后代选择器*//*用逗号隔开的组选择器*/
    color: aqua;
}
div.selector2>p{/*子元素选择器*/
   background-color:brown; 
}
div.selector2+p{/*相邻兄弟选择器*/
    color: red;
}
div.selector2+p~h4{/*普通相邻兄弟选择器*/
    color: darkorange;
}
span:first-child{/*:first-child伪类，一个元素作为其父类元素的第一个子类才会被应用*/
    color: chartreuse;
    font-size: 40px;
}
input.zhanghao:focus{/*:focus伪类，它适用于具有焦点的元素。
:focus应用于元素具有焦点的时间内。一个例子是其中具有文本输入光标的输入框。其他元素，如超链接，也可以有焦点*/
    background-color: aqua ;
}
p:lang(en){/**/
    color: red;
}

p:lang(en):first-letter{/*伪元素,:first-letter选择器用来指定元素第一个字母的样式。仅适用于块级元素*/
    font-size: 200%;
    color: darkturquoise;
}
p.firstline:first-line{/*伪元素用来指定元素第一行的样式。<br/>为一行*/
    color: deeppink;
    font-size: 200%;
}
/*:before 在每个元素之前插入内容和样式
  :after 在每个元素之后插入内容*/
p.before:before{
    content:"金牌讲师大司马：";
    color:green;
        
}
p.after:after{ content:url(https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2808333403,3536553402&fm=21&gp=0.jpg);
}
/*navigation bar*/

ul.navigation{/*在ul中取消掉列表的前缀*/
    list-style-type: none;   /*字体对齐ul或li*/
    margin: 0px;     /*float如果你想链接到具有相同的大小，你必须使用浮动的方法。*/
    padding: 0px;
    text-align: center;
    padding-bottom: 10px;
    padding-top: 10px;
    background-color: burlywood;
}
ul.navigation li{
    display: inline;
    padding-bottom: 10px;
    padding-top: 10px;
    margin:  7%;
}
ul.navigation a:link,ul.navigation a:visited{
    color: seagreen;
    font-weight: bolder;
    text-decoration: none;
    padding: 10px;/*填充<a>标签的所属空间*/
    }
ul.navigation a:hover,ul.navigation a:active{
    color: red;
}
ul.navi{
    list-style-type: none;
    width: 15%;
    padding:0px;
    background-color: #98bf21; 
    text-align: center;
    
}
ul.navi li{
    text-align:;
    padding: 0px;
    margin: 0px;
}
ul.navi a:link,ul.navi a:visited{
    padding: 20px;
    display: block;
    text-decoration: none;
    color: aqua;
}
a:hover,a:active{
    background-color:#7A991A;
    color: red;
}
ul.v
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
ul.v li
{
float:left;
}
ul.v a:link,ul.v a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
ul.v a:hover,ul.v a:active
{
background-color:#7A991A;
}
/*dropdown 下拉列表*/
div.dp{/* 容器 <div> - 需要定位下拉内容 */
    position: relative;
/*因为只有整个容器有一个定位，下拉内容的决对定位才有一个相对绝对的位置*/
    display: inline-block;/*可以设置整个容器的宽和高但容器不换行*/
 /*inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。默认的大小是取决于容器的大小*/
    
}
button.btn{
    background-color: skyblue;   
}
div.dpcon{
   /* visibility: hidden;区别于display在于不显示但是仍然占据空间 */
    display: none;/*隐藏不占据空间*/
    position: absolute;/*这里用到绝对定位是因为绝对定位不在当前的文本流内*/
    left: 0px;
    min-width: 100%; 
    box-shadow: 10px 8px 16px 0px black ;
    /*box-shadow 属性让下拉菜单看起来像一个"卡片"。*/
/* h-shadow	必需。水平阴影的位置。允许负值。	
   v-shadow	必需。垂直阴影的位置。允许负值。	
   blur	    可选。模糊距离。	
   spread	可选。阴影的尺寸。	
   color	可选。阴影的颜色。请参阅 CSS 颜色值。
   inset	可选。将外部阴影 (outset) 改为内部阴影。*/
}
div.dpcon a{
    display: block;
    text-decoration: none;
    color: aqua;
}
div.dpcon a:hover { 
    color: red;
    background-color: beige;
}
.dp:hover .btn{/* 当下拉内容显示后修改下拉按钮的背景颜色 */
    background-color: blueviolet;
}
.dp:hover div.dpcon{/*下拉内容是下拉悬停时的后代 而不是下拉的后代*/
    display: inline;
}
/*图片下拉*/
.dropdown{
    display: inline-block;
    position: relative;
}
.dropdownimg{
    z-index: 1;
    display: none;
    position: absolute;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
div.dropdown:hover .dropdownimg{
    display: inline-block;
}
/*导航栏中的下拉菜单*/
ul.nav-bar{
list-style-type: none;
    padding: 0px;
    margin: 0px;
    width: 50%;
    margin: auto;
    text-align: center;
    background-color: aliceblue;
}
ul.nav-bar a{
    text-decoration: none;
    color: black;
    font-weight: 700;
}
ul.nav-bar a:hover{
    background-color: azure;
    color: red;
}
div.dropdown-user{
    position: relative;/*下拉列表容器定位*/
    display: inline-block;/*整个容器作为一个内联元素显示且具有调整宽和高*/
}
div.dropdown-user:hover li.li-btn{
    background-color: azure;
}
.dropdown-list{/*下拉内容*/
    position: absolute;/*设置绝对定位脱离文本流*/
    display: none;/*设置下拉内容容器隐藏*/
    left: 20px;
    text-align:left;
    width:70px;
    background-color: white;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-list a{
    display: block;/*将下拉内容下的<a>作为一个块级元素显示*/
    padding-top: 5px;
}
ul.nav-bar li{
    display:inline;/*将列表中<li>作为一个内联元素显示*/
    margin-left:20px;
}
.dropdown-user:hover .dropdown-list{
    display: block;/*当鼠标悬停在下拉列表容器时，下拉内容作为一个块级元素显示*/
}
img.opacity{
    opacity: 0.3;
    filter:alpha(opacity=40);/* For IE8 and earlier */
}
img.opacity:hover{
    opacity: 1;
}
/*创建一个具有文本拥有背景图像的透明框*/
.background{
    margin: auto;
    width: 500px;
  height: 250px;
    border: 2px solid black;
background:  url(http://img4.imgtn.bdimg.com/it/u=363512995,591304275&fm=23&gp=0.jpg) ;
}
.box{
   width: 400px;
    height: 180px;
    margin: 35px 50px;
    border: 1px solid white;
    background-color: #ffffff;
    opacity: 0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
}
.box p{
    font-size: 15px;
    font-weight: 900;
    color: black;
    margin:20px 30px;  
}
/*图像拼合*/
ul.imagemosaic {
    list-style-type: none;
    position: relative;
    height: 45px;
    width: 100%;
    margin: 0px;
    padding: 0px;
    
        
}
ul.imagemosaic li{
    position: absolute;
    /*absolute是不占位的所以可以通过外层套一个div设置宽和高来进行占位*/
/*   float:left;*/
/*   display: inline-block;*/
    /*会存在空隙，由于换行符。解决方法：1.将代码写成一行。2.利用HTML代码注释将换行符注释掉。3.取消标签闭合。4.在父容器上使用font-size:0。空格也相当于一个字符;。*/
     /* display:inline; IE7 hack 
        zoom:1; /*触发hasLayout*/
}
ul.imagemosaic li.a{
    height: 45px;
    width: 45px;
    left: 0;
    background: url(http://www.w3cschool.cn/statics/images/course/img_navsprites_hover.gif) 0 0;
}
ul.imagemosaic li.b{
    left: 45px;
    height:45px;
    width:45px;
    background: url(http://www.w3cschool.cn/statics/images/course/img_navsprites_hover.gif) -46px 0;
}
ul.imagemosaic li.c{
    left: 90px;
    height: 45px;
    width: 45px;
    background: url(http://www.w3cschool.cn/statics/images/course/img_navsprites_hover.gif) -90px 0;
}
ul.imagemosaic li a{
    width: 45px;
    height:45px;
    display: block;}
/*内联元素没有自己的独立空间，它是依附于其他块级元素存在的，因此，对行内元素设置高度、宽度、内外边距等属性，都是无效的。*/
li.a a:hover{
    background: url(http://www.w3cschool.cn/statics/images/course/img_navsprites_hover.gif) 0 -45px;
}
li.b a:hover{
    background: url(http://www.w3cschool.cn/statics/images/course/img_navsprites_hover.gif) -45px -45px;
}
li.c a:hover{
    background: url(http://www.w3cschool.cn/statics/images/course/img_navsprites_hover.gif) -90px -45px;
}
/*媒体类型 @media*/
@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }/*当文档宽度小于500px，执行它。*/
}
/*class可以定义多个值，用空格隔开*/

@media only screen and (orientation: landscape) {
    body {
/*   竖屏  portrait：指定输出设备中的页面可见区域高度大于或等于宽度
     横屏  landscape： 除portrait值情况外，都是landscape*/
         background-color: lightblue;
    }
}
/*使用媒体查询的 min-device-width 替代 min-width 属性，它将检测的是设备宽度而不是浏览器宽度。浏览器大小重置时，图片大小不会改变。*/

/*背景图片响应调整大小缩放*/
/*如果 width 属性设置为 100%，图片会根据上下范围实现响应式功能，图片会比原始图片大。如果使用 max-width 属性设置为 100%, 图片永远不会大于其原始大小。给图片设置宽度的百分比，图片本身是不能缩放的，但它的百分比是相对于浏览器大小的。所以间接进行了缩放。视频的响应缩放也是一样的*/

/*1.background-size:contain;背景图片将按比例自适应内容区域。图片保持其比例不变*/
/*2.background-size:100% 100%;背景图片将延展覆盖整个区域*/
/*  background-size: cover;会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例因此 背景图像的某些部分无法显示在背景定位区域中。*/
/*不同设备使用不同的图片*/
/*1.使用媒体查询*/
/*2.html5<picture>元素*/
/*<picture>  
  <source srcset="img_smallflower.jpg" media="(max-width: 400px)">
  <source srcset="img_flowers.jpg">
  <img src="img_flowers.jpg" alt="Flowers">
</picture>*/
/*srcset 属性的必须的，定义了图片资源。
media 属性是可选的，可以在媒体查询的 CSS @media 规则 查看详情。
对于不支持<picture> 元素的浏览器你也可以定义<img>元素来替代。*/
